<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>消息</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="/css/likestyle.css" rel="stylesheet" type="text/css"/>
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="/js/js/tab.js"></script>
    <link href="/css/likeddstyle.css" rel="stylesheet" type="text/css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link href="/css/letterstyle.css" rel="stylesheet" type="text/css"/>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
    </style>
    <script>


        $(function () {
            //获取当前登录用户的(session)信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            var userId = user.id;
            //发送ajax统计 获赞的游记
            $.ajax({
                //async:同步
                async: false,
                url: '/users/' + userId + '/countOthersLike',
                method: "get",
                success: function (data) {
                    console.log(data);
                    $('#otherlike').renderValues(data);
                }
            });

            //根据用户id查询 获得点赞的游记中点赞数最多
            $.ajax({
                //async:同步
                async: false,
                url: '/users/' + userId + '/maxLike',
                method: "get",
                success: function (data) {
                    console.log(data);
                    $('#travel').renderValues(data);
                    $('#travel').click(function () {
                        window.location.href = '/travelContent.html?id=' + data.result.id;
                    })
                }
            });

            $.ajax({
                //async:同步
                async: false,
                url: '/users/' + userId + '/countLike',
                method: "get",
                success: function (data) {
                    console.log(data);
                    $('#like').renderValues(data);
                }
            });
            //要查信息状态
            //标志是查那个 默认查询点赞我的
            var flag = 'otherslike';
            //当前页的input框
            var currentInput = $('#currentPage');
            //用于存储游记的数组容器
            var travelArr = [];
            //点赞我的游记
            $('#otherslikelist').click(function () {
                flag = 'otherslike';
                //清空内容
                travelArr = [];
                pages = 0;
                currentInput.val(1);
                query()
                var flag = '';
            })
            //我点赞
            $('#userlikelist').click(function () {
                flag = 'userlike';
                //清空内容
                travelArr = [];
                pages = 0;
                currentInput.val(1);
                query()
            })
            //总页数
            var pages;

            //获取我的游记数据
            function query() {
                //获取当前页的值
                var currentPage = currentInput.val();
                $.get('/users/' + user.id + '/' + flag, {userId: userId, currentPage: currentPage}, function (data) {
                    console.log(data);
                    //合并两个数组
                    $.merge(travelArr, data.list);
                    var json = {list: travelArr}//将数组封装成一个json对象,属性名为loop渲染指定的list
                    //内容渲染 根据标志 查 我点赞的还是我点赞的来渲染
                    if (flag == 'otherslike') {
                        $('#otherslike').renderValues(json);
                    } else {
                        $('#userlike').renderValues(json);
                    }
                    $('.aui-news-item img').click(function (event) {
                        //读取的信息 后 改变 其状态
                        var id = $(this).data('id');
                        //获取跳转的链接
                        if (flag == 'otherslike') {
                            window.location.href = '/userProfiles.html?id=' + id;
                        } else {
                            window.location.href = '/travelContent.html?id=' + id;
                        }

                    })
                    $('.aui-news-item-bd').click(function (event) {
                        //读取的信息 后 改变 其状态
                        var id = $(this).data('id');
                        //获取跳转的链接
                        if (flag == 'otherslike') {
                            window.location.href = '/travelContent.html?id=' + id;
                        } else {
                            window.location.href = '/userProfiles.html?id=' + id;
                        }

                    })
                    //从pageInfo中获取总页数,并设置
                    pages = data.pages;
                }, 'json');

                //当前页input框+1维护,不能用函数内的变量
                currentInput.val(parseInt(currentPage) + 1);//字符串记得转成数字
            }

            //当页面滚动条变化时,执行的函数
            $(window).scroll(function () {
                console.log(pages);
                console.log(currentInput.val());
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    //获取当前页
                    var currentPage = currentInput.val();
                    //判断是否大于最后一页
                    if (currentPage <= pages) {
                        console.log(currentPage);
                        console.log(pages);
                        query();
                    } else {//最后一页,提示
                        $(document).dialog({
                            type: 'notice',
                            infoText: '到底',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            //默认查一次
            query();
            //统计时特效
            $(document).ready(function () {
                $('.counter-value').each(function () {
                    $(this).prop('Counter', 0).animate({
                        Counter: $(this).text()
                    }, {
                        duration: 3500,
                        easing: 'swing',
                        step: function (now) {
                            $(this).text(Math.ceil(now));
                        }
                    });
                });
            });
        })


    </script>
</head>
<style>
    .bgpicture {
        border-bottom: 1px solid #d8d8d8;
        border-top: 1px solid #d8d8d8;

    }

    .bgpicture img {
        border-radius: 30px;
    }

    .myicon {
        margin-top: 10px;
        font-size: 40px;
        color: #00c3f5;
    }
</style>
<body>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:history.go(-1);" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">个人游记</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">

        </a>
    </header>
    <div class="aui-palace bgpicture">
        <a href="javascript:;" class="aui-palace-grid" id="otherlike">
            <div class="aui-palace-grid-icon">
                <span class="glyphicon glyphicon-thumbs-up myicon"></span>

            </div>
            <div class="aui-palace-grid-text">
                <span class="counter-value" render-html="result"></span>
                <h2>获赞总数</h2>
            </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
            <div class="aui-palace-grid-icon">
                <span class=" glyphicon glyphicon-fire myicon"></span>
            </div>
            <div class="aui-palace-grid-text" id="travel">
                <span class="" render-html="result.title"></span>
                <h2>最高获赞</h2>
            </div>
        </a>

        <a href="javascript:;" class="aui-palace-grid" id="like">
            <div class="aui-palace-grid-icon">
                <span class="glyphicon glyphicon-heart myicon"></span>
            </div>
            <div class="aui-palace-grid-text">
                <span class="counter-value" render-html="result"></span>
                <h2>点赞总数</h2>
            </div>
        </a>

    </div>
    <script type="text/javascript">

    </script>

    <section class="aui-scrollView">
        <section class="aui-scrollView ">
            <div class="aui-tab" data-ydui-tab>
                <ul class="tab-nav">
                    <li class="tab-nav-item tab-active" id="otherslikelist">
                        <a href="javascript:;">谁赞过我</a>
                    </li>
                    <li class="tab-nav-item " id="userlikelist">
                        <a href="javascript:;">我赞过谁</a>
                    </li>
                </ul>
                <div class="tab-panel">
                    <div class="tab-panel-item tab-active sectionDiv" id="otherslike">
                        <div class="tab-item">
                            <div class="aui-news-box" render-loop="list">
                                <a href="javascript:;" class="aui-news-item">
                                    <div class="aui-news-item-hd">
                                        <img render-src="list.userHeadImgUrl" alt="" render-attr="data-id=list.userId">
                                    </div>
                                    <div class="aui-news-item-bd" render-attr="data-id=list.travelId">
                                        <h4 render-html="list.nickName"></h4>
                                        <p render-html="list.message"></p>
                                    </div>
                                    <span class="aui-news-item-fr" render-html="list.createtime"></span>
                                </a>

                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="currentPage" id="currentPage" value="1"/>
                    <div class="tab-panel-item  sectionDiv" id="userlike">
                        <div class="tab-item">
                            <div class="aui-news-box" render-loop="list">
                                <a href="javascript:;" class="aui-news-item">
                                    <div class="aui-news-item-hd">
                                        <img render-src="list.coverUrl" alt="" width="55px" height="55px"
                                             render-attr="data-id=list.travelId">
                                    </div>
                                    <div class="aui-news-item-bd" render-attr="data-id=list.authorId">
                                        <h4 render-html="list.title"></h4>
                                        <p render-html="list.message"></p>
                                    </div>
                                    <span class="aui-news-item-fr" render-html="list.createtime"></span>
                                </a>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

    </section>
</section>
</body>
</html>
